<template>
  <div class="hello">
    <h1> 二维码</h1>
    <vue-qr ref="Qrcode"
            :text="dataObj.text"
            :logoSrc="dataObj.logo"
            :callback="test" qid="testQrId"></vue-qr>

  </div>
</template>

<script>
  // 二维码组件
  import VueQr from 'vue-qr'

  export default {
    name: 'HelloWorld',
    components: { VueQr },
    data () {
      return {
        dataObj: {
          text: 'http://qsvys0f8s.hd-bkt.clouddn.com/FnjZr9HW1w8_BpugIkD6Qpv5_jXN',
          logo: require('../assets/logo.png')
        }
      }
    },
    methods: {
      test(dataUrl, id) {
        console.log(dataUrl)
        console.log(id)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>
